<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-11-14 17:48:55
 * @FilePath: \onemodeSWJ\src\views\paramPlanManage\roughnessDataManage\mainStreamDataAdd.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <el-table
    :data="planData"
    border
    size="small"
    style="width: 50%; margin-bottom: 10px"
  >
    <el-table-column label="河道糙率" align="center">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="reservoir" label="库区" align="center" />
      <el-table-column prop="river" label="干流" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createComment" label="备注" align="center" />
    </el-table-column>
  </el-table>

  <el-row style="height: 80%">
    <el-col :span="2">
      <a-tree
        v-model:selectedKeys="treeSelectData"
        :tree-data="sectionTreeData"
        :fieldNames="{
          children: 'children',
          title: 'key',
          key: 'key',
        }"
        @select="treeChange"
      />
    </el-col>

    <el-col
      :span="22"
      style="
        height: 100%;
        overflow: auto;
        padding-left: 10px;
        border-left: 1px solid #ccc;
      "
    >
      <MainStreamSection
        v-if="planData[0].reservoir != '长江中下游'"
        :isEditComponent="true"
        :selectRiverData="selectRiverData"
      />
      <MainStreamSectionCJ
        v-else
        :isEditComponent="true"
        :selectRiverData="selectRiverData"
      />
    </el-col>
  </el-row>

  <el-button
    style="
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 20px;
    "
    type="primary"
    :loading="submitBtnLoadingType"
    @click="planSubmit"
  >
    方案保存
  </el-button>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter, RouteParams } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  getSelectAreaRiverList,
  searchAllClArguments,
  addClArguments,
  queryCJRoughnessScheme,
  getCJMainStreamInfo,
  updateCJRoughness,
} from "@/request/api";

import MainStreamSection from "./mainStreamSection.vue";
import MainStreamSectionCJ from "./mainStreamSectionCJ.vue";

export default defineComponent({
  components: {
    MainStreamSection,
    MainStreamSectionCJ,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const state: {
      sectionTreeData: any;
      treeSelectData: any[];
      selectRiverData: any;
      submitBtnLoadingType: boolean;
      planData: RouteParams[];
    } = reactive({
      // 方案参数信息
      planData: [{}],

      // 河道树状数据
      sectionTreeData: [],
      // 树状图所选河道
      treeSelectData: [],
      // 所选河道对象
      selectRiverData: {
        key: "",
        title: "",
        type: "",
      },

      // 提交按钮加载状态
      submitBtnLoadingType: false,
    });

    // 所有河道糙率数据
    let steamData = reactive({});
    provide("steamData", steamData);

    // 长江糙率删除trafficId数组
    const cjDelArr = reactive([]);
    provide("cjDelArr", cjDelArr);

    onMounted(() => {
      state.planData[0] = route.params;

      getSteamData();
    });

    /**
     * @description: 获取所有河道的糙率数据
     * @return {*}
     */
    function getSteamData() {
      if (route.params.reservoir != "长江中下游") {
        searchAllClArguments({
          id: route.params.id,
          reservoir: route.params.reservoir,
          type: "fa",
        }).then((res: any) => {
          for (const key in res) {
            steamData[key] = res[key];
          }

          getSectionTreeData();
        });
      } else {
        queryCJRoughnessScheme({
          roughnessId: route.params.id,
          queryType: "2",
        }).then((res: any) => {
          for (const key in res.data) {
            steamData[key] = res.data[key];
          }

          getSectionTreeData();
        });
      }
    }

    /**
     * @description: 获取河道树状图数据
     * @return {*}
     */
    function getSectionTreeData() {
      if (route.params.reservoir != "长江中下游") {
        getSelectAreaRiverList({
          area: route.params.reservoir,
        }).then((res: any) => {
          state.sectionTreeData = res.data;

          // 树状图默认选中第一项
          state.treeSelectData = [res.data[0].key];

          // 直接调用树状图切换事件触发选中河道对象赋值
          treeChange(state.treeSelectData);
        });
      } else {
        getCJMainStreamInfo({}).then((res: any) => {
          state.sectionTreeData = res.data;

          // 树状图默认选中第一项
          state.treeSelectData = [res.data[0].key];

          // 直接调用树状图切换事件触发糙率获取以及选中河道对象赋值
          treeChange(state.treeSelectData);
        });
      }
    }

    /**
     * @description: 河道树状图点击切换
     * @param {*} checkedKeys 所选中的河道数组
     * @return {*}
     */
    function treeChange(checkedKeys) {
      if (checkedKeys.length != 0) {
        const treeData = state.sectionTreeData.find(
          (item) => item.key === checkedKeys[0]
        );

        state.selectRiverData = treeData;
      } else {
        state.treeSelectData = [state.selectRiverData.key];
      }
    }

    /**
     * @description: 方案提交
     * @return {*}
     */
    function planSubmit() {
      // 提交按钮修改为加载状态
      state.submitBtnLoadingType = true;

      if (route.params.reservoir != "长江中下游") {
        addClArguments({
          ...state.planData[0],
          data: JSON.stringify(steamData),
        }).then((res: any) => {
          // 提交按钮取消加载状态
          state.submitBtnLoadingType = false;

          if (res.code == 1) {
            ElMessage.success(res.msg);

            router.push({
              name: "mainStreamDataList",
            });
          }
        });
      } else {
        updateCJRoughness({
          data: steamData,
          deleteId: cjDelArr.filter((item) => item != 0),
        }).then((res: any) => {
          // 提交按钮取消加载状态
          state.submitBtnLoadingType = false;

          if (res.code === 200) {
            ElMessage.success(res.msg);

            router.push({
              name: "mainStreamDataList",
            });
          }
        });
      }
    }

    return {
      ...toRefs(state),

      treeChange,
      planSubmit,
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}

.section-del-btn {
  display: none;
}
.el-card.is-hover-shadow:hover:hover .section-del-btn {
  display: block;

  position: absolute;
  right: 10px;
  top: 15px;
}
</style>
